<template>
    <main class="content">
        <h2>我是小猫咪</h2>
        <p>小喵</p>
        <div class="conent">
            <div class="two">
                <h3>蓝猫</h3>
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.1Nf2byT3LfxTrBsWBhRJxwHaHa?rs=1&pid=ImgDetMain" alt="" style="width: 200px; height: 200px;">
            </div>
            <div class="two">
                <h3>金渐层</h3>
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.QS9C1w494DiEHmQQx527EgHaFI?rs=1&pid=ImgDetMain" alt="" style="width: 200px; height: 200px">
            </div>
            <div class="two">
                <h3>三花</h3>
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.dMtojHSLJpZeE1K_rZ4XSgHaF4?rs=1&pid=ImgDetMain" alt="" style="width: 200px; height: 200px">
            </div>
        </div>
    </main>

</template>
<script>
export default {
    name: 'ContentSection'
}
</script>

<style scoped>
.content {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.conent {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.two {
    flex: 1;
    padding: 1rem;
    margin: 0 1rem;
    background-color: #f5f5f5;
    border-radius: 5px;
}

.two h3 {
    color: #333;
}
</style>